{% if customOption.size > 0 %}
  {% for option in customOption %}
    {% assign index_count = forloop.index %}
    {%- comment -%}
      option.plan_properties_id 如果存在说明为自定义属性
    {%- endcomment -%}
    {%- if option.plan_properties_id >= 0 -%}
      <div class="product_custom_option">
        <span>
          {{ option.name }}
          :
        </span>
        {% if option.type == "file" %}
          <a
            href="{{ option.urls }}"
            target="_blank"
            download
            class="custom-option-download">
            {{ lang.account.orders.property_detail }}
          </a>
          {%- unless option.price == '0' -%}
            <span>
              &nbsp;(
              {%- if option.price > 0 -%}
                +
              {%- else -%}
                -
              {%- endif -%}
              {{ option.price | money }}
              )
            </span>
          {%- endunless -%}
        {% elsif option.type == "public_image" %}
          {%- if option.price_type == 1 -%}
            {%- for el in option.value -%}
              <span>{{ el.value }}
                &nbsp;
                {%- if el.price != 0 -%}(
                  {%- if el.price > 0 -%}+{%- else -%}-
                  {%- endif -%}
                  {{ el.price | money }}
                  )
                {%- endif -%}
              </span>
              {%- unless forloop.last -%},&nbsp;
              {%- endunless -%}
            {%- endfor -%}
          {%- else -%}
            {%- for el in option.value -%}
              <span>{{ el.value }}
                {%- if forloop.last -%}
                  &nbsp;
                  {%- if option.price != 0 -%}(
                    {%- if option.price > 0 -%}+{%- else -%}-
                    {%- endif -%}
                    {{ option.price | money }}
                    )
                  {%- endif -%}
                {%- endif -%}
              </span>
              {%- unless forloop.last -%},&nbsp;
              {%- endunless -%}
            {%- endfor -%}
          {%- endif -%}
        {% elsif option.type == "image_gallery" %}
          <a
            href="{{ option.urls }}"
            target="_blank"
            download
            class="custom-option-download">
            {{ option.value }}
          </a>
          {%- unless option.price == '0' -%}
            <span>
              &nbsp;(
              {%- if option.price > 0 -%}
                +
              {%- else -%}
                -
              {%- endif -%}
              {{ option.price | money }}
              )
            </span>
          {%- endunless -%}
        {%- elsif option.type == "preview_images" -%}
          {% assign image_extensions = "jpg,jpeg,png,gif,webp,svg,bmp" | split: "," %}
          <div style="display: flex;flex-wrap: wrap;gap: 10px;">
            {% for el in option.value %}
              {% assign ext = el.urls | split: "." | last | downcase | split: "?" | first %}
              {% unless image_extensions contains ext %}
                <div class="icon-box">
                  <a
                    class="icon-box-icon"
                    href="{{ el.urls }}"
                    target="_blank"
                    download>
                    <svg
                      t="1751359351490"
                      class="icon"
                      viewBox="0 0 1050 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="8275"
                      width="40"
                      height="40">
                      <path d="M685.633641 1.260308l-0.918974-0.892718L191.094154 0v557.659897h42.010256V42.771692h421.861744v145.276718h162.15959V481.805128h42.010256v-7.299282c0-193.509744 0.183795-306.438564 0.183795-306.438564v-1.39159z" p-id="8276"></path>
                      <path d="M937.458872 1024H95.205744l-3.177026-15.753846-91.897436-454.235898 563.436308 1.024 61.597538-76.694974h425.353846zM127.606154 984.615385h777.609846l96.544821-467.02277H644.017231l-61.597539 76.721231h-9.531077l-524.550564-0.945231z" p-id="8277"></path>
                      <path d="M156.094359 509.453128h-59.076923v-175.025231l59.076923-65.063384z" p-id="8278"></path>
                      <path d="M895.396103 430.946462h49.44082v-31.980308l-49.44082-55.427282z" p-id="8279"></path>
                      <path d="M546.028308 193.719795h-228.929641v-39.384616h228.929641z" p-id="8280"></path>
                      <path d="M590.007795 397.837128h-273.066667v-39.384615h273.066667z" p-id="8281"></path>
                      <path d="M667.542974 297.32759H316.626051v-39.384616h350.916923z" p-id="8282"></path>
                    </svg>
                  </a>
                </div>
                {% continue %}
              {% endunless %}
              <div class="custom-option-image_{{template}}_{{ index }}_{{index_count}}" style="width: 40px; height: 40px;cursor: pointer;background:#F3F4F6">
                <img
                  style="width: 100%;height: 100%;object-fit: contain;"
                  data-src="{{ el.urls }}"
                  alt="{{el.urls}}"
                  src="{{defaultLoadSrc }}">
              </div>
            {% endfor %}
          </div>
          <script>
               $(function(){
                 let imgage = {{ option.value | json }};
               let imageArr = imgage.map(el => { return el.urls});
               $('.custom-option-image_{{template}}_{{ index }}_{{index_count}}').click(function() {
                 let index = $('.custom-option-image_{{template}}_{{ index }}_{{index_count}}').index($(this));
                 moi.pictureImages(imageArr, index, $(this))
               })
              })
          </script>

        {%- elsif option.type == "image_group" -%}
          {%- for el in option.value -%}
            <a
              href="{{ el.urls }}"
              target="_blank"
              download
              class="custom-option-download">
              {{ el.value }}
            </a>
            {%- unless el.price == '0' -%}
              <span>
                &nbsp;(
                {%- if el.price > 0 -%}
                  +
                {%- else -%}
                  -
                {%- endif -%}
                {{ el.price | money }}
                )
              </span>
            {%- endunless -%}
            {%- unless forloop.last -%}
              ,&nbsp;
            {%- endunless -%}
          {%- endfor -%}

        {%- elsif option.type == "checkbox" or option.type == "block_text" or option.type == "image" -%}
          {%- for el in option.value -%}
            <span>
              {{ el.value }}
              {%- unless el.price == '0' -%}
                &nbsp;(
                {%- if option.price > 0 -%}
                  +
                {%- else -%}
                  -
                {%- endif -%}
                {{ el.price | money }}
                )
              {%- endunless -%}
            </span>
            {%- unless forloop.last -%}
              ,&nbsp;
            {%- endunless -%}
          {%- endfor -%}
        {% else %}
          <span>
            {{ option.value }}
            {%- unless option.price == '0' -%}
              &nbsp;(
              {%- if option.price > 0 -%}
                +
              {%- else -%}
                -
              {%- endif -%}
              {{ option.price | money }}
              )
            {%- endunless -%}
          </span>
        {% endif %}
      </div>
    {%- else -%}
      {%- if option.type == "gift_text" or option.type == "app_minmaxoffer" -%}
        <div class="cart-label-warp">
          {{ option.value }}
        </div>
      {%- elsif option.type == "promotion_timer" and isShowTiem -%}
        <div class="cart-label-timer" style="display: none"></div>
      {%- endif -%}
    {%- endif -%}


  {% endfor %}
{% endif %}